<template>
  <div class="versionUpgradManagement">
    <h3>版本升级管理</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search1">
          <template slot="prepend">用户名</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>用户类型</label>
        <el-select v-model="search2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
     <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">新增</el-button>
    </div>
    <div class="list">
        <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
      <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="序号"
          sortable
          width="80"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="标题"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="版本类型"
          width="80"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="版本号"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="备注说明"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="强制更新"
          width="80"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="包下载链接地址"
        ></el-table-column>
         <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="状态"
          width="60"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="创建时间"
           sortable
          width="120"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //修改版本信息弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="modifyEditorDialogVisible" width="40%" center>
      <div class="row">
        <span>版本标题：</span>
        <el-input v-model="inputVersionTitle" placeholder="请输入版本标题" clearable></el-input>
      </div>
      <div class="row">
        <span>版本类型：</span>
        <el-select v-model="inputVersionType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>版本号：</span>
        <el-input v-model="inputVersionNum" placeholder="请输入广告简介" clearable></el-input>
      </div>
      <div class="row">
        <span>是否强制更新：</span>
        <el-select v-model="inputIsUpdate" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>包地址：</span>
        <el-input v-model="inputAdress" placeholder="请输入包地址" clearable></el-input>
      </div>
      <div class="row">
        <span>状态：</span>
        <el-select v-model="inputStatus" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>备注说明：</span>
        <el-input v-model="inputNote" placeholder="请输入备注说明" clearable type="textarea" :rows="3"></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "versionUpgradManagement",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "全部"
        },
        {
          value: "选项2",
          label: "安卓版"
        },
        {
          value: "选项3",
          label: "IOS版"
        },
       
      ],
      options2: [
        {
          value: "选项1",
          label: "是"
        },
        {
          value: "选项2",
          label: "否"
        },
       
      ],
       options2: [
        {
          value: "选项1",
          label: "启用"
        },
        {
          value: "选项2",
          label: "禁用"
        },
       
      ],
      search1: "",
      search2: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
       currentPage1: 1,
      dialogTitle:"修改版本信息",
      modifyEditorDialogVisible:false,
      //弹窗版本标题
      inputVersionTitle:"",
      //弹窗版本类型
      inputVersionType:"",
      //弹窗版本号
      inputVersionNum:"",
      //弹窗是否强制更新
      inputIsUpdate:"",
      //弹窗包地址
      inputAdress:"",
      //弹窗状态
      inputStatus:"",
      //弹窗备注说明
      inputNote:"",
    };
  },
  mounted() {},
  methods: {
      // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //新增
    addData(){
        this.modifyEditorDialogVisible=true;
        this.dialogTitle="创建版本信息";
    },
    //编辑
    handleEdit(index,row){
        this.modifyEditorDialogVisible=true;
        this.dialogTitle="修改版本信息";
    },
    //删除
    handleDelete(index,row){},
    //提交修改或者新增
    submitModifyEditor(){},
    //取消提交
    cancelModifyEditor(){
        this.modifyEditorDialogVisible=false;
    },
  }
};
</script>
<style scoped>
h3 {
  padding: 0.2rem;
  color: #3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
</style>